// 翻页款时间
import { useEffect, useState } from "react";
import "./index.less";

import { getNowFormatDate, getWeekDate } from "@/utils/time";

const TimeLocal: React.FC<React.HTMLProps<Element>> = props => {
  console.log(props, 2132222);
  const [changingHH, setChangingHH] = useState<string>("");
  const [changingMM, setChangingMM] = useState<string>("");

  const [currentHhSum, setCurrentHhSum] = useState<string>(getNowFormatDate("hh"));
  const [nextHhSum, setNextHhSum] = useState<string>(getNowFormatDate("hh"));

  const [currentMmSum, setCurrentMmSum] = useState<string>(getNowFormatDate("mm"));
  const [nextMmSum, setNextMmSum] = useState<string>(getNowFormatDate("mm"));

  const [fullYear] = useState<string>(getNowFormatDate("yy"));
  const [fullMon] = useState<string>(getNowFormatDate("mo"));
  const [fullDay] = useState<string>(getNowFormatDate("dd"));

  const getHandleDate = () => {
    // 定时器翻页
    setInterval(() => {
      console.log(getNowFormatDate("ss"));

      if (getNowFormatDate("ss") === "00") {
        setChangingMM("changing");

        setTimeout(() => {
          setChangingMM("");
          setCurrentMmSum(getNowFormatDate("mm"));
        }, 300);

        setTimeout(() => {
          setNextMmSum(getNowFormatDate("mm"));
        }, 1000);
      }

      if (nextMmSum === "38" && getNowFormatDate("ss") === "00") {
        setChangingHH("changing");

        setTimeout(() => {
          setChangingHH("");
          setCurrentHhSum(getNowFormatDate("hh"));
        }, 300);

        setTimeout(() => {
          setNextHhSum(getNowFormatDate("hh"));
        }, 1000);
      }
    }, 1000);
  };

  useEffect(() => {
    getHandleDate();
  }, []);
  return (
    <div className="time-card">
      <div className="time-card-top">
        <div className={changingHH + " card-time"}>
          <div className="item next-top">{nextHhSum}</div>
          <div className="item next-bottom">{nextHhSum}</div>
          <div className="item current-top">{currentHhSum}</div>
          <div className="item current-bottom">{currentHhSum}</div>
        </div>

        <div className="card-split">:</div>

        <div className={changingMM + " card-time"}>
          <div className="item next-top">{nextMmSum}</div>
          <div className="item next-bottom">{nextMmSum}</div>
          <div className="item current-top">{currentMmSum}</div>
          <div className="item current-bottom">{currentMmSum}</div>
        </div>
      </div>

      <div className="time-card-bottom">
        <p>
          {fullYear}/{fullMon}/{fullDay}
        </p>
        <p>{getWeekDate()}</p>
      </div>
    </div>
  );
};
export default TimeLocal;
